<%@page import="com.etc.zzsys.entity.Users"%>
<%@page import="java.util.List"%>
<%@page import="com.zzsys.dao.impl.UsersDaoImpl"%>
<%@page import="com.zzsys.dao.UsersDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">

<title>Dashboard Template for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">


<!-- Custom styles for this template -->
<link href="css/dashboard.css" rel="stylesheet">

<!-- jquery.js -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<!-- bootstrap.js  -->
<script src="js/bootstrap.js"></script>

</head>

<body>

<%-- <%@ include file="session.jsp" %> --%>

<jsp:include page="session.jsp"></jsp:include>
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">




			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Project name</a>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li><a href="#">Dashboard</a></li>
					<li><a href="#">Settings</a></li>
					<li><a href="#">Profile</a></li>
					<li><a href="#">Help</a></li>
				</ul>
				<form class="navbar-form navbar-right">
					<input type="text" class="form-control" placeholder="Search...">
				</form>
			</div>
		</div>
	</nav>

	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
				<ul class="nav nav-sidebar">
					<li><a href="homepage.jsp">首页 <span class="sr-only">(current)</span></a></li>
					<!-- 用户列表选项处于激活状态  -->
					<li class="active"><a href="us2">用户列表</a></li>
					<li ><a href="useradd.jsp">增加用户</a></li>
					<li><a href="us2?op=queryBypage">用户列表[JSTL]</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li><a href="">Nav item</a></li>
					<li><a href="">Nav item again</a></li>
					<li><a href="">One more nav</a></li>
					<li><a href="">Another nav item</a></li>
					<li><a href="">More navigation</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li><a href="">Nav item again</a></li>
					<li><a href="">One more nav</a></li>
					<li><a href="">Another nav item</a></li>
				</ul>
			</div>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

				<h2 class="sub-header">用户列表</h2>

				<div class="table-responsive">

					<table class="table table-striped">
						<thead>
							<tr>
							   <th>用户编号 </th>
								<th>用户名</th>
								<th>性别</th>
								<th>电话</th>
								<th>地址</th>
								<th>等级</th>
								<th>状态</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<%
								//request.getAttribute(arg0) 参数为key的名字
								if (request.getAttribute("list") != null) {
									Object obj = request.getAttribute("list");
									//显示数据
									if (obj instanceof List) {
										List<Users> list = (List<Users>) obj;

										for (Users users : list) {
							%>
							<tr>
							    <td><%=users.getUserId()%></td>
								<td><%=users.getUserName()%></td>
								<td><%=users.getUserSex()%></td>
								<td><%=users.getUserTel()%></td>
								<td><%=users.getUserAddress()%></td>
								<td><%=users.getUserLevel() == 0 ? "管理员" : "普通用户"%></td>
								<td><%=users.getUserState() == 0 ? "禁用" : "启用"%></td>
								<td>
									<!-- <button class="btn btn-danger">修改</button> --> <a
									class="btn btn-danger update" id="modal-919220"
									href="#modal-container-919220" role="button"
									data-toggle="modal">修改</a> <!-- <button class="btn btn-danger">删除</button> -->
									<!-- 使用超链接来完成删除访问 参数的传递   ,问题:删除之前要确认一下.--> <a
									href="us2?op=del&userId=<%=users.getUserId()%>"
									class="btn btn-danger">删除</a>
								</td>
							</tr>
							<%
								}
									}
								}
							%>


						</tbody>
					</table>
				</div>
			</div>
		</div>


		<!-- 遮罩层开始 -->
		<div class="row clearfix">
			<div class="col-md-12 column">


				<div class="modal fade" id="modal-container-919220" role="dialog"
					aria-labelledby="myModalLabel" aria-hidden="true">
					<!-- 表单提交给servlet,明确行为是update -->
					<form class="form-horizontal" action="us2?op=update" method="post">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal"
									aria-hidden="true">×</button>
								<h4 class="modal-title" id="myModalLabel">修改</h4>
							</div>
							<div class="modal-body">
							
								
								
								<div class="form-group">
										<label for="username" class="col-sm-2 control-label">用户编号</label>
										<div class="col-sm-6">
											<input type="text" class="form-control" id="userId"
												 name="userId" readonly>
										</div>
									</div>
								
									<div class="form-group">
										<label for="username" class="col-sm-2 control-label">用户名</label>
										<div class="col-sm-6">
											<input type="text" class="form-control" id="userName"
												placeholder="请输入用户名" required="required" name="userName">
										</div>
									</div>
									
									
									<div class="form-group">
						<label for="inputPassword3" class="col-sm-2 control-label">性别</label>
						<div class="col-sm-2">
							<select class="form-control" name="userSex" id="userSex">
							   <option value="男">男</option>
							   <option value="女">女</option>
							</select>
						</div>
					</div>
					
					
					<div class="form-group">
						<label for="inputPassword3" class="col-sm-2 control-label">电话号码</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" id="userTel"
								placeholder="请输入电话号码"  required="required" name="userTel" id="userTel">
						</div>
					</div>
					
					<div class="form-group">
						<label for="inputPassword3" class="col-sm-2 control-label">用户地址</label>
						<div class="col-sm-6">
							<input type="text" class="form-control" id="userAddress"
								placeholder="请输入地址"   name="userAddress">
						</div>
					</div>
					
					
					<div class="form-group">
						<label for="inputPassword3" class="col-sm-2 control-label">用户状态</label>
						<div class="col-sm-4">
							<select class="form-control" name="userState" id="userState">
							   <option value="1">启用</option>
							   <option value="0">禁用</option>
							</select>
						</div>
					</div>
									
									
					
								
							</div>
							
							<div class="modal-footer">
								<button type="button" class="btn btn-default"
									data-dismiss="modal">关闭</button>
								<button type="submit" class="btn btn-primary">保存</button>
							</div>
						</div>
								

					</div>
						</form>

				</div>

			</div>
		</div>
		<!-- 遮罩层结束 -->


	</div>

<script>
  $(function(){
	  //修改按钮的单击事件
	  $(".update").click(function(){
		  //自己 $(this) update这个超链接
		  //$(this).parents("tr") 超链接所在的行
		  //find("td").eq(0) 查找td，那个? 0 第一个td
		var userId =  $(this).parents("tr").find("td").eq(0).text();
		 var userName =  $(this).parents("tr").find("td").eq(1).text();
		  var userSex =  $(this).parents("tr").find("td").eq(2).text();
		  var userTel =  $(this).parents("tr").find("td").eq(3).text();
		  var userAddress = $(this).parents("tr").find("td").eq(4).text();
		  var userState = $(this).parents("tr").find("td").eq(6).text();
		 console.log(userName);
		 //找到userName文本框，赋值为userName变量值
		  $("#userId").val(userId);
		 $("#userName").val(userName);
		 $("#userSex").val(userSex);
		 $("#userTel").val(userTel);
		 $("#userAddress").val(userAddress);
		 $("#userState").val(userState=="启用"?1:0);
		  
	  });
	  
  });
</script>
</body>
</html>
